<template>
  <div class="table-special-style custom-table-ui">
    <el-table 
      v-el-table-infinite-scroll="loadTableFn"
      :infinite-scroll-disabled="!showAll"
      :height="showAll ? '7.15rem' : 'auto'"
      :data="tableData"
      style="width: 100%"
      :default-sort = "{prop: 'date', order: 'descending'}"
      >
      <el-table-column
        type="index"
        width="50">
        <template slot="header" slot-scope="scope">
          序号
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="processTitle"
        label="标题"
        sortable
       >
        <template slot-scope="scope">
          <div class="task-title " @click="openUrl(scope.row.openUrl)">
            {{ scope.row.processTitle }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="processType"
        label="流程类型"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="processCreateUser"
        label="流程创建人"
        sortable
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="processState"
        label="审批状态"
        >
        <template slot-scope="scope">
          <div class="examine-status" :class="{'examine-status1': scope.row.processState == '已完成', 'examine-status2': scope.row.processState == '审批中', 'examine-status3': scope.row.processState == '状态异常'}">
            {{ scope.row.processState }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="trackTime"
        sortable
        label="我的办理时间">
      </el-table-column> -->
      <el-table-column v-for="(column, index) in tableColumns" :key="column.prop" :label="column.label"
          :min-width="column.width">
          <template slot="header" slot-scope="scoped">
              <span class="column-header">{{ column.label }}</span>
            
          </template>
          <template slot-scope="scope">
            <div v-if="column.prop == 'processTitle'" class="task-title" :title="scope.row.processTitle" @click="openUrl(scope.row.openUrl)">
              <span :class="{'status-icon': scope.row.isImportant}"></span>
              {{ scope.row.processTitle }}
            </div>
            <div v-else-if="column.prop == 'processState'" class="examine-status" :class="{'examine-status1': scope.row.processState == '已完成', 'examine-status2': scope.row.processState == '审批中', 'examine-status3': scope.row.processState == '状态异常'}">
              {{ scope.row.processState }}
            </div>
            <div class="one-line" v-else :title="scope.row[column.prop].length > 10 ? scope.row[column.prop] : ''">
              {{ scope.row[column.prop] }}
            </div>
          </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: '',
    mixins: [],
    components: {
    },
    props: {
      showAll: Boolean,
      tableData: Array
    },
    data () {
      return {
        sid: this._sid,
        tableColumns: [
          { prop: "processTitle", label: "标题", sortType: "", filterKeyword: "", selectedSort: '' , width: '150px'},
          { prop: "processType", label: "流程类型", sortType: "", filterKeyword: "", selectedSort: '' },
          { prop: "processCreateUser", label: "流程创建人", sortType: "", filterKeyword: "", selectedSort: '' },
          { prop: "processState", label: "审批状态", sortType: "", filterKeyword: "", selectedSort: '' },
          { prop: "trackTime", label: "我的办理时间", sortType: "", filterKeyword: "", selectedSort: '' },
        ],
        popoverVisible: [],
      }
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {
      
    },
    methods: {
      openUrl(url) {
        window.open(url)
      },
      loadTableFn() {
        this.$emit("loadTableFn", 'handle')
      },
      popClick(item, idx) {
            const _this = this;
          console.log(item, 'item的数据1')
          console.log(idx, 'idx的数据1')
          _this.radioIdx = idx;
      },
      myRadio(part, item, idx) {
        // 更新对应列的 selectedSort 属性
        this.tableColumns[idx].selectedSort = part;
        this.$emit('searchTaskFn', {type: 'handle', column : item, index: idx})
      },
      searchTaskFn(column,index) {
        console.log("column,index", column,index)
        this.$emit('searchTaskFn', {type: 'handle', column : column, index: index})
      }
    }
  }
</script>

<style scoped lang="scss"></style>
